<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>注册页面</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		.wrap{
			width: 1000px;
			margin:100px auto;
			overflow: hidden;
			background-color: #ccc;
		}
		.wrap div{
			float: left;
			height: 60px;
		}
		.wrap p{
			float: right;
			margin-right: 300px;
			color: red;
		}
	</style>
</head>
<body>
	<div class="wrap">
		<div class="nameBox">
			<div class="nameBoxInput">
				用户名：<input type="text" id="nameInput">
				<p id="nameAlert">6-16位，必字母开头，可包含字母数字下划线，结尾必为字母</p>
			</div>
		</div>
		<div class="passwordBox">
			<div class="passwordBoxInput">
				密码&nbsp;&nbsp;：&nbsp;<input type="text" id="passwordInput">
				<p id="passwordAlert">必为字母数字下划线</p>
			</div>
		</div>
		<div class="surePasswordBox">
			<div class="surePasswordBoxInput">
				确认密码：<input type="text" id="surePassword">
				<p id="surePasswordAlert">请确认两次密码输入一致</p>
			</div>
		</div>
		<div class="emailBox">
			<div class="emailBoxInput">
				邮箱：<input type="text" id="emailInput">
				<p id="emailAlert">请输入正确的邮箱格式</p>
			</div>
		</div>
		<div class="phoneBox">
			<div class="phoneBoxInput">
				手机号：<input type="text" id="phoneInput">
				<p id="phoneAlert">请输入正确的手机号格式</p>
			</div>
		</div>
	</div>
	<script>
		function v(e){
			return document.getElementById(e);
		}
		function blurTo(x,reg,p,str){
			var val=x.value;
			if (reg.test(val)&&val) {
				console.log(1)
				v(p).innerHTML="对勾！";
				v(p).style.color="green";
			}else{
				v(p).innerHTML=str;
				v(p).style.color="red";
			}
		}
		v("nameInput").onblur=function(){
			var reg=/^[a-zA-Z]\w{4,16}[a-zA-Z]$/;
			blurTo(v("nameInput"),reg,"nameAlert","6-16位，必字母开头，可包含字母数字下划线，结尾必为字母")
		}
		v("passwordInput").onblur=function(){
			var reg=/\w+/;
			blurTo(v("passwordInput"),reg,"passwordAlert","必为字母数字下划线")
		}
		v("surePassword").onblur=function(){
			var val=v("passwordInput").value;
			if (this.value==val) {
				console.log(1)
				v("surePasswordAlert").innerHTML="对勾！";
				v("surePasswordAlert").style.color="green";
			}else{
				v("surePasswordAlert").innerHTML="请确认两次密码输入一致";
				v("surePasswordAlert").style.color="red";
			}
		}
		v("emailInput").onblur=function(){
			var reg=/^\w+@[a-zA-Z0-9]+\.[a-zA-Z0-9]{2,4}$/;
			blurTo(v("emailInput"),reg,"emailAlert","请输入正确的邮箱格式")
		}
		v("phoneInput").onblur=function(){
			var reg=/^1(3|4|5|7|8)\d{9}$/;
			blurTo(v("phoneInput"),reg,"phoneAlert","请输入正确的手机号格式")
		}
	</script>
</body>
</html>